<cc:page type="normal" style="customize" showSidebar="false" showHeader="true" />
<cc>
</cc>
<script type="text/javascript" src="/staticResource.action?m=getResource&resourceId=1604368626374MCniNYKC"></script>
<script type="text/javascript">
    var now = getNow();
    watermark({ "watermark_txt": "<cc:outprint>userInfo.getRealName()</cc:outprint>" + now });
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <style>
        .el-select {
            width: 180px;
        }

        .el-form-item {
            margin-bottom: 0px;
        }

        .el-input {
            max-width: 180px;
            /*height:26px;*/
        }

        .el-form-item__label {
            /*line-height: 32px;*/
            font-size: 12px;
        }

        .el-input__icon {
            line-height: 0px;
        }

        .el-input--suffix .el-input__inner {
            padding-right: 0px;
        }

        .tbClass td {
            padding: 3px 0px;
        }

        .tbClass th {
            padding: 3px 0px;
        }

        .el-checkbox__inner {
            display: inline-block;
            position: relative;
            border: 1px solid #080fe6;
            border-radius: 2px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 14px;
            height: 14px;
            background-color: #FFF;
            z-index: 1;
            -webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
            transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
        }

        .el-table__row {
            height: 45px;
        }

        .xk_td {
            border: 1px solid dimgrey;
            min-width: 70px;
            height: 40px;
            padding: 2px;
        }

        .xk_dz {
            background-color: #00CC33;
            color: #fff;
        }

        .xk_dzs {
            background-color: #006633;
            color: #fff;
        }

        .xk_yz {
            background-color: #00CCFF;
            color: #fff;
        }

        .xk_ys {
            background-color: #FF6600;
            color: #fff;
        }

        .xk_ktrg {
            background-color: #FFFF33;
            color: #000;
        }

        .xk_bktrg {
            background-color: #CC9900;
            color: #fff;
        }

        .xk_pt {
            background-color: #9933FF;
            color: #fff;
        }

        .xk_text {
            font-size: 12px;
            white-space: nowrap;
        }

        .xk_dy {
            text-align: center;
            border-left: 1px solid dimgrey;
            border-right: 1px solid dimgrey;
            border-bottom: 1px solid dimgray;
        }

        .xk_ld {
            text-align: center;
            border: 1px solid dimgrey;
            font-size: 16px;
            font-weight: bold;
        }
        .el-popover {
            font-size: 12px;
            word-break: keep-all;
            padding: 5px;
        }
        .el-popover__title {
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 2px;
            text-align: center;
        }
    </style>
</head>

<body style="padding-left:20px;padding-right: 20px;">
    <div id="app">
        <br />
        <div style="text-align: center; font-size: 25px; font-weight: bold;">销控图</div>
        <br />
        <div>
        </div>
        <el-row>
            <el-col :span="24" :offset="0">
                <el-form :inline="true">
                    <el-form-item label="项目">
                        <el-select size="small" filterable v-model="xm" placeholder="请选择" @change="queryQQ()">
                            <el-option v-for="item in xm_options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="期区">
                        <el-select size="small" v-model="qq" clearable filterable placeholder="请选择" @change="queryLD()">
                            <el-option v-for="item in qq_options" :key="item.value" :label="item.text"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼栋">
                        <el-select size="small" v-model="ld" clearable filterable placeholder="请选择">
                            <el-option v-for="item in ld_options" :key="item.value" :label="item.text"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" @click="queryData()">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="25" :offset="0">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="期区图片" name="0">
                        <el-row :gutter="20">
                            <el-col :span="24" :offset="0">
                                <div v-for="img in qq_images" :key="img.id">
                                    <el-image :src="img.url" style="margin-top: 10px;">
                                    </el-image>
                                </div>
                            </el-col>
                        </el-row>

                    </el-tab-pane>
                    <el-tab-pane label="销控图" name="1">
                        <div>
                            <el-button size="small">待售</el-button>
                            <el-button size="small" class="xk_dz" style="margin-left: 10px;">待租
                            </el-button>
                            <el-button size="small" class="xk_dzs" style="margin-left: 10px;">
                                待租售</el-button>
                            <el-button size="small" class="xk_yz" style="margin-left: 10px;">已租
                            </el-button>
                            <el-button size="small" class="xk_ys" style="margin-left: 10px;">已售
                            </el-button>
                            <el-button size="small" class="xk_ktrg" style="margin-left: 10px;">
                                可退认购</el-button>
                            <el-button size="small" class="xk_bktrg" style="margin-left: 10px;">
                                不可退认购</el-button>
                            <el-button size="small" class="xk_pt" style="margin-left: 10px;">配套
                            </el-button>
                        </div>

                        <div
                            style="margin-top: 10px;margin-bottom: 30px; overflow: auto; display: flex; flex-wrap: nowrap;">

                            <div v-for="LD in xk_data" :key="LD.ld_id" style="margin-left: 5px;">
                                <div class="xk_ld">
                                    {{LD.ld_id}}栋
                                </div>
                                <div style="display: flex">
                                    <div v-for="DY in LD.dys" :key="DY.dy_id">
                                        <div v-if="DY.dy_id !== null && DY.dy_id.length > 0"
                                            class="xk_dy">
                                            第{{DY.dy_id}}单元</div>
                                        <div>
                                            <table>
                                                <tr v-for="CS in DY.css" :key="CS.cs_id">
                                                    <td v-for="item in CS.fc" :key="item.id"
                                                        :class="item.cls">
                                                        <el-popover placement="top-start" title="房产详情" trigger="hover" width="200">
                                                            <div class="popover-content">
                                                                <div>{{item.name}}</div>
                                                                <div>{{item.cen}}楼</div>
                                                                <div>意向：{{item.yxfysl === null ? 0 : item.yxfysl}}人</div>
                                                                <div>可退认购：{{item.ktrgsl === null ? 0 : item.ktrgsl}}人</div>
                                                                <div>不可退认购：{{item.bktrgsl === null ? 0 : item.bktrgsl}}人</div>
                                                                <div>实测建筑面积：{{item.scjzmj === null || item.scjzmj === '' ? 0 : item.scjzmj}}㎡</div>
                                                                <div>建筑面积：{{item.jzmj === null || item.jzmj === ''? 0 : item.jzmj}}㎡</div>
                                                            </div>
                                                            <a :href="item.url" slot="reference" target="_blank">
                                                                <div class="xk_text">{{item.fh}}</div>
                                                                <div class="xk_text">建筑面积：{{item.scjzmj === null || item.scjzmj === 0 ? item.jzmj : item.scjzmj}}</div>
                                                                <div class="xk_text">意向：{{item.yxfysl === null ? 0 :
                                                                    item.yxfysl}}</div>
                                                            </a>
                                                        </el-popover>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <script>
            /**
             * @author Jiangcheng
             * @last_modified_time 2020_12_31
             * The algorithm can be optimized and the time given is too little
            */
            // model layer fast function
            (function (_w) {
                function XKT() {
                    this.ld_id = '';
                    this.ld = [];
                    this.dys = [];
                }

                function DY() {
                    this.dy_id = '';
                    this.cs = [];
                    this.css = [];
                }

                function CS() {
                    this.cs_id = '';
                    this.fc = [];
                }
                _w.model = {};
                _w.model.XKT = XKT;
                _w.model.DY = DY;
                _w.model.CS = CS;
            })(window);
            // vue instance start
            new Vue({
                el: '#app',
                data() {
                    return {
                        xm: '',
                        xm_options: [],
                        qq: '',
                        qq_options: [],
                        ld: '',
                        ld_options: [],
                        activeTab: '0',
                        xk_data: [],
                        qq_images: []
                    }
                },
                created() {
                    this.initData();
                },
                methods: {
                    initData() {
                        this.queryXM();
                    },
                    queryXM() {
                        let that = this;
                        axios.get('/controller.action?name=csszt&datatype=xzxm')
                            .then(function (response) {
                                let data = response.data
                                // 无情On^3
                                data.forEach(ele1 => {
                                    ele1.children.forEach(ele2 => {
                                        ele2.children.forEach(ele3 => {
                                            that.xm_options.push(ele3)
                                        })
                                    })
                                })
                            })
                            .catch(function (error) {
                                console.log(error)
                            });
                    },
                    queryImages() {
                        let that = this;
                        axios.get('hqxktcxtj.jsp?key=fj&fjqq=' + this.qq)
                            .then(function (response) {
                                response.data.forEach(element => {
                                    element.url = '/document.action?m=getdown&id=' + element.id
                                })
                                that.qq_images = response.data
                            })
                            .catch(function (error) {
                                console.log(error)
                            })
                    },
                    queryQQ() {
                        this.qq = ""
                        this.ld = ""
                        let that = this
                        var url = 'hqxktcxtj.jsp?key=qq&xm=' + this.xm
                        axios.get(url)
                            .then(function (response) {
                                that.qq_options = response.data
                            })
                            .catch(function (error) {
                                console.log(error)
                            })
                    },
                    queryLD() {
                        this.ld = "";
                        let that = this;
                        var url = 'hqxktcxtj.jsp?key=ld&qq=' + this.qq
                        axios.get(url)
                            .then(function (response) {
                                that.ld_options = response.data
                            })
                            .catch(function (error) {
                                console.log(error)
                            });
                    },
                    queryData() {
                        this.xk_data = []
                        this.qq_images = []
                        this.queryImages()
                        let that = this
                        if (this.ld === "") {
                            axios.get('hqxktcxtj.jsp?key=ld&qq=' + that.qq)
                                .then(function (res) {

                                    res.data.forEach(ele => {
                                        let xkt = new window.model.XKT()
                                        xkt.ld_id = ele.value
                                        that.xk_data.push(xkt)
                                    })

                                    let url = 'hqxktcxtj.jsp?key=fcqq&qq=' + that.qq
                                    axios.get(url)
                                        .then(function (response) {
                                            that.xk_data.forEach(elem => {
                                                response.data.forEach(element => {
                                                    if (elem.ld_id === element.ld) {
                                                        element.url = '/query.action?id=' + element.id + '&m=query'
                                                        that.color_fc(element)
                                                        elem.ld.push(element)
                                                    }
                                                })
                                            })

                                            that.group_dy()
                                            that.group_cen()

                                        })
                                        .catch(function (error) {
                                            console.log(error);
                                        })
                                })
                                .catch(function (error) {
                                    console.log(error)
                                })

                        } else {

                            let url = 'hqxktcxtj.jsp?key=fcld&ldqq=' + this.qq + '&ld=' + encodeURIComponent(this.ld)
                            let that = this
                            axios.get(url)
                                .then(function (response) {

                                    let xkt = new window.model.XKT()
                                    xkt.ld_id = that.ld

                                    response.data.forEach(element => {
                                        that.color_fc(element)
                                        element.url = '/query.action?id=' + element.id + '&m=query';
                                        xkt.ld.push(element);
                                    });
                                    that.xk_data.push(xkt)

                                    that.group_dy()
                                    that.group_cen()
                                })
                                .catch(function (error) {
                                    console.log(error);
                                })
                        }
                    },
                    remove_null(arr) {
                        let new_arr = [];
                        for (let i = 0; i < arr.length; i++) {
                            if (arr[i].value !== null || arr[i].text !== null) {
                                new_arr.push(arr[i]);
                            }
                        }
                        return new_arr;
                    },
                    color_fc(fc) {
                        fc.cls = 'xk_td'
                        switch (fc.fczt) {
                            case '待售':
                                fc.cls += ''
                                break;
                            case '待租':
                                fc.cls += ' xk_dz'
                                break;
                            case '待租售':
                                fc.cls += ' xk_dzs'
                                break;
                            case '已租':
                                fc.cls += ' xk_yz'
                                break;
                            case '已售':
                                fc.cls += ' xk_ys'
                                break;
                            case '可退认购':
                                fc.cls += ' xk_ktrg'
                                break;
                            case '不可退认购':
                                fc.cls += ' xk_bktrg'
                                break;
                            case '配套':
                                fc.cls += ' xk_pt'
                                break;
                            default:
                                fc.cls += ''
                                break;
                        }
                    },
                    group_dy() {
                        let that = this;
                        that.xk_data.forEach(elem => {
                            
                            // if (elem.dys.length === 0) {
                            //     let dy = new window.model.DY()
                            //     dy.dy_id = elem.ld[0].dy
                            //     elem.dys.push(dy)
                            // }

                            elem.ld.forEach(eleme => {
                                let temp_dy = {};
                                let flag = false;
                                elem.dys.forEach(element => {
                                    if (element.dy_id === eleme.dy) {
                                        temp_dy = element
                                        flag = true
                                    }
                                });
                                if (flag === false) {
                                    temp_dy = new window.model.DY()
                                    temp_dy.dy_id = eleme.dy
                                    elem.dys.push(temp_dy);
                                }
                                temp_dy.cs.push(eleme);
                            })
                        })
                    },
                    group_cen() {
                        let that = this;
                        // 无情On^4
                        that.xk_data.forEach(elem => {
                            elem.dys.forEach(eleme => {

                                // if (eleme.css.length === 0) {
                                //     let cs = new window.model.CS()
                                //     cs.cs_id = eleme.cs[0].cen
                                //     eleme.css.push(cs)
                                // }
                                eleme.cs.forEach(elemen => {
                                    let temp_cs = {};
                                    let flag = false;
                                    eleme.css.forEach(element => {
                                        if (element.cs_id === elemen.cen) {
                                            temp_cs = element
                                            flag = true
                                        }
                                    });
                                    if (flag === false) {
                                        temp_cs = new window.model.CS()
                                        temp_cs.cs_id = elemen.cen
                                        eleme.css.push(temp_cs)
                                    }
                                    temp_cs.fc.push(elemen)
                                })
                            })
                        })
                    }
                }
            })
        </script>

</body>

</html>